<template>
  <div>
    <div class="header">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        :rules="formRules"
        ref="formRef"
        require-asterisk-position="right"
      >
        <el-form-item label="省(直辖市、自治区)" prop="province">
          <el-select
            v-model="formInline.province"
            placeholder="请选择"
            @change="getCities"
          >
            <el-option
              v-for="item in select.province"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="地级市" prop="cities">
          <el-select v-model="formInline.cities" placeholder="请选择">
            <el-option
              v-for="item in select.cities"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="区(县级市、县)" prop="district">
          <el-select v-model="formInline.district" placeholder="请选择">
            <el-option
              v-for="item in select.district"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="医院、机构" prop="lab">
          <el-select v-model="formInline.lab" placeholder="请选择">
            <el-option v-for="item in select.lab" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="采集点类型">
          <el-select v-model="formInline.type" placeholder="不选择即全部">
            <el-option
              v-for="item in select.type"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上传时间">
          <el-date-picker
            v-model="timeStart"
            type="datetime"
            placeholder="Select date and time"
            value-format="YYYY-MM-DD hh:mm:ss"
          />
          <span> ~ </span>
          <el-date-picker
            v-model="timeEnd"
            type="datetime"
            placeholder="Select date and time"
            value-format="YYYY-MM-DD hh:mm:ss"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <el-table
        :data="
          tableData.value.slice(
            (currentPage - 1) * pageSize,
            currentPage * pageSize
          )
        "
        style="width: 100%; overflow-y: auto"
      >
        <el-table-column prop="index" label="序号"></el-table-column>
        <el-table-column
          prop="labName"
          label="实验室名称"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="district"
          label="所在区"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="type"
          label="采集点类型"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="uploadTime"
          label="上传时间"
          min-width="155"
        ></el-table-column>
        <el-table-column
          prop="reviewTime"
          label="审核时间"
          min-width="155"
        ></el-table-column>
        <el-table-column
          prop="boxCode"
          label="箱子码"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="barcode"
          label="条码"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="tubeType"
          label="试管类型"
          width="120"
        ></el-table-column>
        <el-table-column prop="results" label="结果"></el-table-column>
        <el-table-column
          prop="receivedTime"
          label="接收时间"
          min-width="155"
        ></el-table-column>
        <el-table-column
          prop="acquisitionTime"
          label="采集时间"
          min-width="155"
        ></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model:current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        v-model:page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.value.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { get, post } from '../../utils/request'
// 表单规则
const formRules = ref({
  province: { required: true, message: 'select1 is required' },
  cities: { required: true, message: 'select1 is required' },
  district: { required: true, message: 'select1 is required' },
  lab: { required: true, message: 'select1 is required' },
  type: { required: true, message: 'select1 is required' }
})
// 表单绑定数据
const formInline = reactive({
  province: '',
  cities: '',
  district: '',
  lab: '',
  type: '',
  timeStart: '',
  timeEnd: ''
})
const timeStart = ref('')
const timeEnd = ref('')
formInline.timeStart = timeStart
formInline.timeEnd = timeEnd
// 获取地级市
const getCities = async () => {
  try {
    const res = await get('/getCities', {
      formInline: formInline.province
    })
    select.cities = res.data
  } catch (e) {
    alert('请求失败')
  }
}
const tableData = reactive([])
// 获取表格内容
// const getTable = async () => {
//   try {
//     const res = await post('/getTable', {
//       formInline: formInline
//     })
//     tableData.value = res.data
//     console.log(tableData)
//   } catch (e) {
//     alert('请求失败')
//   }
// }
// 表单选项
const select = reactive({
  province: ['福建省', '广东省', '浙江省'],
  cities: [],
  district: ['鲤城区', '丰泽区'],
  lab: ['实验室1', '实验室2'],
  type: ['普通采集点', '隔离点', '高风险']
})
const formRef = ref(null)
const onSubmit = () => {
  // 表单规则判断
  formRef.value.validate((valid) => {
    if (!valid) return
    console.log('submit!')
    console.log(formInline)
    getTable()
  })
}
const Data = reactive([
  { index: 1,labName: '实验室1',district: '丰泽区',type: '普通采集点',uploadTime: '2022-12-12 00:00:00',reviewTime: '2022-12-12 00:00:00',boxCode: '12345678',barcode: '4001258412656465',tubeType: '十合一混采',results: '阴性',receivedTime: '2022-12-12 02:00:00',acquisitionTime: '2022-12-12 03:00:00'},
  { index: 2,labName: '实验室1',district: '丰泽区',type: '普通采集点',uploadTime: '2022-12-12 00:00:00',reviewTime: '2022-12-12 00:00:00',boxCode: '12345678',barcode: '4001258412656465',tubeType: '十合一混采',results: '阴性',receivedTime: '2022-12-12 02:00:00',acquisitionTime: '2022-12-12 03:00:00'},
  { index: 3,labName: '实验室1',district: '丰泽区',type: '普通采集点',uploadTime: '2022-12-12 00:00:00',reviewTime: '2022-12-12 00:00:00',boxCode: '12345678',barcode: '4001258412656465',tubeType: '十合一混采',results: '阴性',receivedTime: '2022-12-12 02:00:00',acquisitionTime: '2022-12-12 03:00:00'},
  { index: 4,labName: '实验室1',district: '丰泽区',type: '普通采集点',uploadTime: '2022-12-12 00:00:00',reviewTime: '2022-12-12 00:00:00',boxCode: '12345678',barcode: '4001258412656465',tubeType: '十合一混采',results: '阴性',receivedTime: '2022-12-12 02:00:00',acquisitionTime: '2022-12-12 03:00:00'},
  { index: 5,labName: '实验室1',district: '丰泽区',type: '普通采集点',uploadTime: '2022-12-12 00:00:00',reviewTime: '2022-12-12 00:00:00',boxCode: '12345678',barcode: '4001258412656465',tubeType: '十合一混采',results: '阴性',receivedTime: '2022-12-12 02:00:00',acquisitionTime: '2022-12-12 03:00:00'},
  { index: 6,labName: '实验室1',district: '丰泽区',type: '普通采集点',uploadTime: '2022-12-12 00:00:00',reviewTime: '2022-12-12 00:00:00',boxCode: '12345678',barcode: '4001258412656465',tubeType: '十合一混采',results: '阴性',receivedTime: '2022-12-12 02:00:00',acquisitionTime: '2022-12-12 03:00:00'},
  { index: 7,labName: '实验室1',district: '丰泽区',type: '普通采集点',uploadTime: '2022-12-12 00:00:00',reviewTime: '2022-12-12 00:00:00',boxCode: '12345678',barcode: '4001258412656465',tubeType: '十合一混采',results: '阴性',receivedTime: '2022-12-12 02:00:00',acquisitionTime: '2022-12-12 03:00:00'},
  { index: 8,labName: '实验室1',district: '丰泽区',type: '普通采集点',uploadTime: '2022-12-12 00:00:00',reviewTime: '2022-12-12 00:00:00',boxCode: '12345678',barcode: '4001258412656465',tubeType: '十合一混采',results: '阴性',receivedTime: '2022-12-12 02:00:00',acquisitionTime: '2022-12-12 03:00:00'},
  { index: 9,labName: '实验室1',district: '丰泽区',type: '普通采集点',uploadTime: '2022-12-12 00:00:00',reviewTime: '2022-12-12 00:00:00',boxCode: '12345678',barcode: '4001258412656465',tubeType: '十合一混采',results: '阴性',receivedTime: '2022-12-12 02:00:00',acquisitionTime: '2022-12-12 03:00:00'},
  { index: 10,labName: '实验室1',district: '丰泽区',type: '普通采集点',uploadTime: '2022-12-12 00:00:00',reviewTime: '2022-12-12 00:00:00',boxCode: '12345678',barcode: '4001258412656465',tubeType: '十合一混采',results: '阴性',receivedTime: '2022-12-12 02:00:00',acquisitionTime: '2022-12-12 03:00:00'},
  { index: 11,labName: '实验室1',district: '丰泽区',type: '普通采集点',uploadTime: '2022-12-12 00:00:00',reviewTime: '2022-12-12 00:00:00',boxCode: '12345678',barcode: '4001258412656465',tubeType: '十合一混采',results: '阴性',receivedTime: '2022-12-12 02:00:00',acquisitionTime: '2022-12-12 03:00:00'},
  { index: 12,labName: '实验室1',district: '丰泽区',type: '普通采集点',uploadTime: '2022-12-12 00:00:00',reviewTime: '2022-12-12 00:00:00',boxCode: '12345678',barcode: '4001258412656465',tubeType: '十合一混采',results: '阴性',receivedTime: '2022-12-12 02:00:00',acquisitionTime: '2022-12-12 03:00:00'},
  { index: 13,labName: '实验室1',district: '丰泽区',type: '普通采集点',uploadTime: '2022-12-12 00:00:00',reviewTime: '2022-12-12 00:00:00',boxCode: '12345678',barcode: '4001258412656465',tubeType: '十合一混采',results: '阴性',receivedTime: '2022-12-12 02:00:00',acquisitionTime: '2022-12-12 03:00:00'},
])
tableData.value = Data
const currentPage = ref(1)
const pageSize = ref(10)
const handleSizeChange = (val) => {}
// 当前页
const handleCurrentChange = (val) => {}
</script>
<style lang="scss">
@import '~@/styles/variables.module.scss';

.header {
  //background: #c2d2fa;
  padding: 15px;
  .el-form {
    background: #ffffff;
    .el-input__wrapper {
      border: 1px solid $menuBg !important;
      &.is-focus {
        border: 1px solid $inputFocus !important;
      }
    }
  }
}

.el-scrollbar__wrap {
  max-height: 400px !important;
}
.el-scrollbar__bar.is-vertical {
  width: 10px !important;
}
.el-scrollbar__bar.is-horizontal {
  height: 10px !important;
}
</style>
